<template>
  <div>
    <Markdown v-model="text" />
    <el-button
      style="margin-top: 10px; float: right"
      type="primary"
      icon="el-icon-document"
      @click="getHtml"
    >
      上传
    </el-button>
  </div>
</template>

<script>
// deps for editor
// import 'codemirror/lib/codemirror.css' // codemirror
// import '@toast-ui/editor/dist/toastui-editor.css' // editor ui
// import '@toast-ui/editor/dist/toastui-editor-viewer.css' // editor content

// import Editor from '@toast-ui/editor'
import defaultOptions from "./default-options";

import Markdown from "vue-meditor";

export default {
  // name: "MarkdownEditor",
  props: {
    content: {
      type: String,
      default: "1",
    },
    id: {
      type: String,
      required: false,
      default() {
        return (
          "markdown-editor-" +
          +new Date() +
          ((Math.random() * 1000).toFixed(0) + "")
        );
      },
    },
    options: {
      type: Object,
      default() {
        return defaultOptions;
      },
    },
    mode: {
      type: String,
      default: "markdown",
    },
    height: {
      type: String,
      required: false,
      default: "230px",
    },
    language: {
      type: String,
      required: false,
      default: "en_US", // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
    },
  },
  components: {
    Markdown,
  },
  data() {
    return {
      text: "",
      editor: null,
    };
  },
  computed: {
    editorOptions() {
      const options = Object.assign({}, defaultOptions, this.options);
      options.initialEditType = this.mode;
      options.height = this.height;
      options.language = this.language;
      return options;
    },
  },
  watch: {
    text: function (value) {},
    content: function (value) {
      this.text = value;
      console.log(this.text);
    },
  },
  created() {
    this.text = this.content;
  },
  methods: {
    getHtml() {
      this.$emit("changeMsg", this.text);
    },
  },
};
</script>
